<template>
  <div class="order">
    <div class="top_box">
      <p>订单信息</p>
      <div class="text">
        <p>
          累计订单: <span>{{ datas.order_count }}</span>
        </p>
        <p>
          总消费: <span>￥{{ datas.sum_price }}</span>
        </p>
      </div>
      <img src="http://47.115.51.185/h5/img/orderTime.e95f9090.png" alt="" />
    </div>
    <!-- v-model 绑定当前激活标签对应的索引值 -->
    <van-tabs v-model="activeName">
      <van-tab name="0">
        <template #title class="tab_title">
          <p>待付款</p>
          <p>{{ datas.unpaid_count }}</p>
        </template>
        <img
          class="tab_img"
          src="http://47.115.51.185/h5/img/noOrder.90017ce2.png"
          alt=""
        />
      </van-tab>
      <van-tab name="1">
        <template #title class="tab_title">
          <p>待发货</p>
          <p>{{ datas.order_count }}</p>
        </template>
        <img
          v-if="!order_count"
          class="tab_img"
          src="http://47.115.51.185/h5/img/noOrder.90017ce2.png"
          alt=""
        />
        <!-- 待发货商品 -->
        <shopFahuo
          v-else
          class="shop_bxo"
          v-for="(or_information, i) in order_count"
          :key="i"
          :or_information="or_information"
        >
        </shopFahuo>
        <!-- 滚动加载 -->
        <loading v-if="isloading"></loading>
        <div v-else ref="bottom" @scroll="windowScroll" class="touch-button">{{isMore?"加载更多...":"到底了"}}</div>
      </van-tab>
      <van-tab name="2"
        ><template #title class="tab_title">
          <p>待收货</p>
          <p>{{ datas.received_count }}</p> </template
        ><img
          class="tab_img"
          src="http://47.115.51.185/h5/img/noOrder.90017ce2.png"
          alt=""
      /></van-tab>
      <van-tab name="3"
        ><template #title class="tab_title">
          <p>待评价</p>
          <p>{{ datas.evaluated_count }}</p> </template
        ><img
          class="tab_img"
          src="http://47.115.51.185/h5/img/noOrder.90017ce2.png"
          alt=""
      /></van-tab>
      <van-tab name="4"
        ><template #title class="tab_title">
          <p>已完成</p>
          <p>{{ datas.complete_count }}</p> </template
        ><img
          class="tab_img"
          src="http://47.115.51.185/h5/img/noOrder.90017ce2.png"
          alt=""
      /></van-tab>
    </van-tabs>
  </div>
</template>

<script>
import ShopFahuo from "@/components/ShopFahuo";
import Loading from "@/components/Loading.vue";
export default {
  // props: ["id"],
  components: {
    ShopFahuo, //待发货
    Loading, //加载动画
  },
  data() {
    return {
      datas: {}, //可获取购买的商品件数
      activeName: null,
      // unpaid_count: [], //待付款商品
      order_count: [], //待发货商品
      // received_count:[],//待收货
      // evaluated_count:[], //待评价
      // complete_count:[],//已完成
      pageNum: 1, //页数
      timmerID:null, //
      isloading:false, //是否正在加载
      isMore:true,  //是否还有更多数据
    };
  },
  created() {
    this.activeName = this.$route.params.id; //获取路由参数id
    // console.log("activeName=>", this.$route.params.id);
    this.$axios.get("/order/data").then((d) => {
      this.datas = d;
    });
    // 获取商品信息
    this.$axios
      .get(`/order/list?page=${this.pageNum}&limit=20&type=1`)
      .then((d) => {
        // console.log("order/list?type2==>", d);
        this.order_count = d;
        // console.log("order_count==>",this.order_count)
        // 添加监听事件scroll
      });
    window.addEventListener("scroll", this.windowScroll);
  },
  methods: {
    // 滚动触底加载
    windowScroll() {
      clearTimeout(this.timmerID);
      // console.log("滚动触底=>","\n滚动卷去的距离:",window.scrollY,"\n设备可见区域高度",window.innerHeight,"\n整个网页的高度（包括未显示的部分）:",document.documentElement.offsetHeight)
      let scrollH = window.scrollY; //滚动卷去的距离
      let windowH = window.innerHeight; //设备可见区域高度||网页可视区域高度
      // let documentH=document.documentElement.offsetHeight; //整个网页的高度(包括未显示的部分)
      let documentH = this.$refs.bottom.offsetTop;
        // console.log("documentH=>",documentH+190);
      if (scrollH + windowH >= documentH+190) {
        // console.log("滚动加载");
        // 防抖
        this.timmerID=setTimeout(()=>{
          this.getMore();// 获取更多
        },500)
      }
    },
    // 获取更多
    getMore() {
      let totalPage=this.pageNum*20; //加载后的当前商品数
      let or_count=this.datas.order_count; //总商品数
      // console.log("加载后的当前商品数=>",totalPage,"\n总商品数=>",or_count)
      if(totalPage==or_count){
        // 当加载后的当前商品数等于总商品数,将isMore的值改为false,表示没有更多数据了
        this.isMore=false;
        return;
      }
      this.pageNum++;
      this.isloading=true;  //
      this.$axios
        .get(`/order/list?page=${this.pageNum}&limit=20&type=1`)
        .then((d) => {
          // concat()连接数组
          this.order_count = this.order_count.concat(d);
          this.isloading=false;  //
        });
    },
  },
  // 离开时清除 scroll 方法
  beforeDestroy() {
    window.removeEventListener("scroll",this.windowScroll);
  },
};
</script>
<style lang="less" >
.order {
  background-color: rgb(245, 245, 245);
  height: 100%;
  width: 100%;
  overflow: hidden;
  .top_box {
    width: 100%;
    height: 130px;
    background-color: rgb(233, 51, 35);
    position: relative;
    padding: 20px;
    box-sizing: border-box;
    p {
      color: white;
      font-size: 16px;
      font-weight: 600;
    }
    img {
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-80%);
      width: 50px;
      height: 50px;
    }
    .text {
      margin-top: 10px;
      display: flex;
      p {
        color: rgba(255, 255, 255, 0.7);
        font-size: 12px;
        margin-right: 10px;
      }
    }
  }
  .van-tabs {
    .van-tabs__wrap {
      margin: 0 auto;
      margin-top: -30px;
      width: 95%;
      height: 70px;
      border-radius: 4px 4px 0 0;
      .van-tab--active {
        font-weight: 600;
      }
      .van-tab__text--ellipsis {
        overflow: auto;
        -webkit-line-clamp: 2;
        p {
          text-align: center;
        }
      }
    }
    .van-tabs__content {
      width: 95%;
      margin: 0 auto;
      margin-top: 10px;
      // 每件商品样式
      .shop_bxo {
        padding: 20px;
        margin: 10px 0px 0px 0px;
        background-color: white;
      }
    }
    .tab_img {
      display: block;
      margin: auto;
      padding: 50px 0;
      width: 50%;
      height: 50%;
    }
  }
  // 触底
  .touch-button {
    height: 20px;
    text-align: center;
    font-size: 14px;
    line-height: 20px;
    padding: 10px 0px;
    color: rgb(144, 144, 144);
  }
}
</style>